<template>
	<div>
		<slideShow></slideShow>
		<div class="advanticements" v-for="(adList,index) in adLists">
			<img :src="adList.src" alt="">
			<div class="adTitle">
				{{adList.title}}
				<div class="btns">
					<span v-for="item in adList.category">
						{{item.name}}
					</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import slideShow from "./slideShow.vue"

	export default{
		components:{slideShow},
		data(){
			return {
				adLists: [
					{
						title: "影院解决方案",
						src:require("../assets/影院.png"),
						category: [
							{name:"横幅广告"},
							{name:"竖屏广告"},
							{name:"大屏广告"},
							{name:"对接售票系统"}
						]
					},
					{
						title: "餐饮解决方案",
						src:require("../assets/餐饮.png"),
						category: [
							{name:"联屏广告"},
							{name:"明厨亮灶"},
							{name:"体感游戏"},
							{name:"AR迎宾"},
							{name:"对接排队叫号"}
						]
					},
					{
						title: "商超解决方案",
						src:require("../assets/商超.png"),
						category: [
							{name:"联屏广告"},
							{name:"异形广告"},
							{name:"竖屏广告"},
							{name:"第三方接口对接"}
						]
					}
				]
			}
		}
	}
</script>

<style scoped>
	.advanticements {
		width:100%;
		background: #ccc;
		position: relative;
	}
	.advanticements>img{
		width: 100%;
		display: block;
		margin:0 auto;
	}
	.adTitle {
		width: 100%;
		position: absolute;
		top: 5%;
		text-align: center;
		font-family: "微软雅黑";
		font-size: 36px;
		font-style: bold;
		color: #3573b9;
	}
	.btns>span{
		display: inline-block;
		color: white;
		text-align: center;
		font-family: "微软雅黑";
		font-size: 18px;
		background: #7bbbe7;
		border-radius: 4px;
		margin:24px 20px ;
		padding:5px 5px; 
		cursor: default;
	}
</style>